<html>
<head>
	<meta charset="utf-8">
	<link href="./assets/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="./assets/font-awesome.min.css">
	<link href="./assets/webview.css" rel="stylesheet">

	<link rel="stylesheet" href="./assets/resources/jquery-ui/jquery-ui.complete.min.css"/>
	<link rel="stylesheet" href="./assets/resources/jspanel/jquery.jspanel.css"/>
	<title>Webview - DSP</title>
	<style type="text/css">
		input {
			font-size: 11px;
		}
		select {
			font-size: 11px;
		}
	</style>
</head>

<body>
	
	<?php include 'menu.php' ?>

	<!-- <div class="alert alert-info alert-dismissible" role="alert" id="info_bar">
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	  	<span aria-hidden="true">&times;</span>
	  </button>
	  <i class="fa fa-exclamation-triangle"></i>&nbsp;
	  <span id="info_bar_text"> connect info </span>
	</div> -->

	<!-- 	<h1>DSP</h1> -->
	<div class="row">
	  <div class="col-md-5">
			<table class="table table-hover table-condensed">
				<tr>
					<td>
						<button class="btn btn-success" id="btn_start_up">
						<i class="fa fa-bolt"></i> DSP Startup
						</button>
						<div class="progress" style="margin-top:10px;margin-bottom: 0px">
							<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%" id="progress_val">
							</div>
						</div>
					</td>

					<!-- 					
					<td>
				
						<span id="status">
							<i id="btn_get_dsp_loading" class="fa fa-refresh fa-spin fa-fw fa-5x"></i>
						</span>
					</td> 
					-->
				</tr>


			</table>
	  </div>
	  <div class="col-md-7">

		<!-- <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
		  <div class="panel panel-default">
		    <div class="panel-heading" role="tab" id="headingOne">
		      <h4 class="panel-title">
		        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
		          API Info Log &nbsp;&nbsp;<i class='fa fa-chevron-down'></i>
		        </a>
		          <span id="clean" class="pull-right"><a href="#">Clean</a></span>
		      </h4>
		    </div>
		    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
	
					<div class="panel-body">
					<textarea  spellcheck="false" id="api_info" cols=100 rows=7 style="background-color:#FFFFCC"></textarea>
		      </div>

		    </div>
		  </div>
		</div> -->

	  </div>

	</div>

	<div class="row">
	<!-- <iframe id="dsp_api" frameborder="no" border="0" src="dsp_api.php" width=100%></iframe>
 -->

 <div class="col-md-12">
		<table id="t_dac" class="table table-hover .table-responsive table-condensed">

		<?php 
			$yaml = file_get_contents('./dsp_api.yaml');
			$arr = yaml_parse($yaml);

			for ($i=0; $i<count($arr);$i++)
			{
		?>
			<tr>
				<td>
					<span style="font-size: 13px"> 
					<?= "#". ($i+1) . " " . $arr[$i][":cmd"] ?><br>
					</span>
					<?php 
						$cmdword_str = '';
						$cmdword = $arr[$i][":cmdword"];
						for($ii=0; $ii<count($cmdword);$ii++)
						{
							if( ($ii+1) == count($cmdword))
								//$cmdword_str = $cmdword_str . dechex($cmdword[$ii]);
								$cmdword_str = $cmdword_str . ($cmdword[$ii]);
							else
								//$cmdword_str = $cmdword_str . dechex($cmdword[$ii]) . ',';
								$cmdword_str = $cmdword_str . ($cmdword[$ii]) . ',';
						}

						$cmd = $arr[$i][":cmd"];
					?>
					<button class="btn btn-sm btn-success btn-apis" cmd="<?= $cmd ?>" cmdword="<?= $cmdword_str ?>">
						Send
					</button>
				</td>

				<?php
				if(!empty($arr[$i][":params"]))
				{
					$params_count = count($arr[$i][":params"]);
					for($j=0; $j<count($arr[$i][":params"]); $j++)
					{
						$position_str = '';
						$position = $arr[$i][":params"][$j][":position"];
						for($ii=0; $ii<count($position);$ii++)
						{
							if( ($ii+1) == count($position))
								$position_str = $position_str . ($position[$ii]);
							else
								$position_str = $position_str . ($position[$ii]) . ',';
						}

						$params_type = $arr[$i][":params"][$j][":type"];
						$params_multiply_factor = (!empty($arr[$i][":params"][$j][":multiply_factor"])) ? $arr[$i][":params"][$j][":multiply_factor"] : 1;

						if($params_type == 'Hexadecimal')
						{
							$params_title = $arr[$i][":params"][$j][":name"] . " | " . 'Hexadecimal value';
						}
						else
						{
							$params_range = (!empty($arr[$i][":params"][$j][":range"])) ? implode(',', $arr[$i][":params"][$j][":range"]) : '';
							$params_title = $arr[$i][":params"][$j][":name"] . " | " . $params_range;
						}

				?>
					<td> 
						<a style="color:#666;font-size:11px" title="<?=  $params_title;  ?>">
							<?php   
							$param_name = $arr[$i][":params"][$j][":name"]; 
							if(strlen ($param_name) > 18)
								echo substr($arr[$i][":params"][$j][":name"], 0, 18 ) . "...";
							else
								echo $param_name;
							?>		
						</a>
						<br>
						<?php
						if( $arr[$i][":params"][$j][":type"] == "Choice") {
						?>
							<select style="width:110px; height:30px" params_multiply_factor=<?= $params_multiply_factor ?> params_type="<?= $params_type ?>" position="<?= $position_str ?>">
								<?php 
									$choices_arr = $arr[$i][":params"][$j][":choices"];
									for($m=0; $m<count($choices_arr); $m++){
									$vals =  explode('-', $choices_arr[$m]);
									$val = trim($vals[0]);
								?>
								<option value="<?= $val ?>"><?= $choices_arr[$m] ?></option>
								<?php } ?>
							</select>
						<?php } else { ?>
							<input type="text" name="text1" value=0 placeholder="<?= $params_type ?>" params_multiply_factor=<?= $params_multiply_factor ?>  params_type="<?= $params_type ?>" position="<?= $position_str ?>"  style="width:110px; height:30px">
						<?php } ?>

					</td>

				<?php
					}
				}
				?>
			</tr>

		<?php
			}
		 ?>
		</table>

	  </div>


	</div>


	<div class="modal fade" id="myModalxxx" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog modal-lg" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">DSP API Reslut</h4>
	      </div>
	      <div class="modal-body">
	        
	      </div>

	    </div>
	  </div>
	</div>

	<script src="./assets/jquery.min.js"></script>
	<script src="./assets/bootstrap.min.js"></script>	


	<script src="./assets/resources/jquery-ui/jquery-ui-complete.min.js"></script>
	<!-- <script src="./assets/resources/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script> -->
	<script src="./assets/resources/jspanel/jquery.jspanel.min.js"></script>
	  
	<script type="text/javascript">
		var dsp_pop_win = localStorage.getItem('dsp_pop_win');

		// function check_connect_status()
		// {
		// 	$("#info_bar").hide();
		// 	url = "cgi/cgi_host.php?opt=check_connect_status";
		// 	$.get(url, function(data, status){
		// 		if(data == 'connect_error')
		// 		{
		// 			$("#info_bar_text").html("Please check COM port connectivity ...");
		// 			$("#info_bar").show();
		// 		}

		// 	});
		// }

		//$("#btn_get_dsp_loading").hide();

		var i = 0;
		function get_status(data)
		{
			// console.log("get_status...");
			// url = "cgi/cgi_dsp.php?opt=state";
			// $.get(url, function(data, status){
			// 	console.log(data)
			// 	i = i + 1
			// 	if(data == 9){
			// 		$("#status").html("OK");
			// 		//$("#btn_get_dsp_loading").hide();
			// 		var curr_prog = 100
			// 		$("#progress_val").html(curr_prog + "% OK !" + " retcode: " + data)
			// 		$("#progress_val").attr("aria-valuenow", curr_prog) 
			// 		$("#progress_val").attr("style", "width: "+ curr_prog + "%") 
			// 		clearTimeout(t);
			// 	}
			// 	else
			// 	{
			// 		var curr_prog = data*10 + i
			// 		$("#progress_val").html(curr_prog + "%" + " retcode: " + data)
			// 		$("#progress_val").attr("aria-valuenow", curr_prog)  
			// 		$("#progress_val").attr("style", "width: "+ curr_prog + "%")
			// 	}

			// });
			// t=setTimeout("get_status()", 10000);
			if(data == "OK")
			{
				$("#status").html(data);
				var curr_prog = 100;
				$("#progress_val").html(curr_prog + "% " + data +" !" );
				$("#progress_val").attr("aria-valuenow", curr_prog) ;
				$("#progress_val").attr("style", "width: "+ curr_prog + "%") ;
				$("#progress_val").attr("class", "progress-bar progress-bar-success") ;
			}
			else
			{
				$("#status").html(data);
				var curr_prog = 50;
				$("#progress_val").html(curr_prog + "% " + data +" !" );
				$("#progress_val").attr("aria-valuenow", curr_prog) ;
				$("#progress_val").attr("style", "width: "+ curr_prog + "%") ;
				$("#progress_val").attr("class", "progress-bar progress-bar-danger progress-bar-striped") ;
			}
		}

	
		$(document).ready(function(){
            $.jsPanel({
                position: {left: 620, top: 80},
				title: 'DSP API Info',
				size:  {width: 700, height: 350},
				content: '<textarea  spellcheck="false" id="api_info" cols=120 rows=20 style="background-color:#FFFFCC"></textarea>',
                theme: 'light'
            });
			// check_connect_status();

			// parent.document.all("dsp_api").style.height=document.body.scrollHeight-200; 

			$("#btn_start_up").click(function(){
				//$("#btn_get_dsp_loading").show();
				$("#progress_val").attr("class", "progress-bar progress-bar-success progress-bar-striped active") ;
				$("#progress_val").html("Starting ...");

				url = "cgi/cgi_dsp.php?opt=startup";
				$.get(url, function(data, status){
					console.log(data);
					get_status(data);
					//$("#status").html(data);
				});
			});

			$("#clean").click(function(){
				$("#api_info").html('');
			});


			$(".btn-apis").click(function(){
				var cmd = $(this).attr('cmd');
				var cmdword = $(this).attr('cmdword');
				var params_str = ''
				var position_str = ''
				var params_type_str = ''
				var params_multiply_factor_str = ''

				//var api_info = window.top.document.getElementById("api_info");

				
				$("#api_info", window.top.document).append("send: " + cmd +" : " + cmdword + "\r\n");

				var parent = $(this).parent().nextAll('td');
				parent.each(function(i){
					//alert($(this).find(':input').val());
					params = $(this).find(':input').val();
					params_str = params_str + params + ',';

					position =  $(this).find(':input').attr('position');
					position_str = position_str + position + '|';

					params_type = $(this).find(':input').attr('params_type');
					params_type_str = params_type_str + params_type + '|';

					params_multiply_factor = $(this).find(':input').attr('params_multiply_factor');
					params_multiply_factor_str = params_multiply_factor_str + params_multiply_factor + '|';


					$("#api_info", window.top.document).append("params#" + i + ": "  + params + ">>>params_type: " + params_type + ">>>position: " + position + "\r\n");
				});

				$("#api_info", window.top.document).append("--------------------------------------------------------------------------------\r\n");
				//alert(params_str);

				url = "cgi/cgi_dsp.php?opt=set_api" + "&cmdword=" + cmdword + "&params_str=" + params_str + "&position_str=" + position_str + "&params_type_str=" + params_type_str + "&cmd=" + cmd + "&params_multiply_factor_str=" + params_multiply_factor_str ;
				$.get(url, function(data, status){
					console.log("resp...");
					console.log(data);

					$("#api_info", window.top.document).append("resp:" + data.replace(/\r\n/g, "\r\n")  + "\r\n");

					//Jump to the last line
					var d = window.top.document.getElementById("api_info").scrollHeight;
					window.top.document.getElementById("api_info").scrollTop = d;

					$(".modal-body").html("resp:" + data.replace(/\r\n/g, "<br>")  + "<br>");
		
					// $(".jsPanel-content", window.top.document).append("resp:" + data.replace(/\r\n/g, "\r\n")  + "\r\n");


					// if(dsp_pop_win)
					// {
					// 	if(dsp_pop_win == 'enable')
					// 	{
					// 		$('#myModal').modal('show');
					// 	}
					// }
					// else
					// {
					// 	$('#myModal').modal('show');
					// }

				});

				
			});


		});



	</script>

</body>
</html>